<!doctype html>
<html lang="zh-CN" ng-app="Ani_app"><!--与angular.module函数对应-->
<head>
	<meta charset="UTF-8">
	<title>me-animate.css</title>
	<link rel="stylesheet" href="/frame/bootstrap/css/bootstrap.css">
	<link rel="stylesheet" href="/frame/animate_css/animate.css">
	<script src="/frame/angular_js/angular.js"></script>
    <!--angular路由要在angular之后引入-->
    <script src="/frame/angular_js/angular-ui-router.js"></script>
    <script src="/frame/angular_js/angular-animate.js"></script>
    <script src="ani_app.js"></script><!--angular主控制器-->
</head>
<body ng-controller="mainCtrl"><!--主控制器-->
	<div class="container">
		<div class="row"><!--第一行-->
			<div class="col-md-offset-3 col-md-6">
				<h3 class="text-center">Normal</h3><!--文字居中-->
			</div>
		</div>
		<form action=""><!--第二行-->
			<div class="row">
				<div class="col-md-offset-3 col-md-6">
					<div class="row">
						<div class="col-md-6"><!--第二行,第一列选择下拉-->
							<select class="form-control" ng-model="normalAnimation">
								<!--这一句会使只有在第一次加载时才会有这个选项，ng-if决定该元素是否创建-->
								<option value="选择动画" ng-if="normalAnimation=='选择动画'">选择动画</option>
								<!--ng-bind="normalAnimation"等效于在标签里面放了{{normalAnimation}}-->
								<option value="{{normalAnimation}}" ng-bind="normalAnimation" ng-repeat="normalAnimation in normalAnimations"></option>
							</select>
						</div>
						<div class="col-md-6"><!--第二行,第二列，开始单个元素的动画-->
							<button class="btn btn-primary btn-block" ng-click="toggleAnimate()" ng-bind="toggleText">
							</button>
						</div>
					</div>
				</div>
			</div>
		</form>
		<br />
		<div class="row"><!--第三行-->
			<div class="col-md-offset-3 col-md-6 text-center">
				<button class="btn btn-warning " ng-class="getAnimate()"><!--添加动画-->
				Example
				</button>
			</div>
		</div>
       	<div class="row"><!--第四行-->
            <div class="col-md-offset-3 col-md-6 ">
                <h3 class="text-center">In and Out</h3>
        	</div>
        </div>
        <div class="row"><!--第五行-->
        	<div class="col-md-offset-3 col-md-6">
        		<div class="col-md-4"><!--第五行第1列，下拉选择-->
					<select class="form-control" ng-model="inAnimation">
						<option value="选择入场动画" ng-if="inAnimation=='选择入场动画'">选择入场动画</option>
						<option value="{{inAnimation}}" ng-bind="inAnimation" ng-repeat="inAnimation in inAnimations"></option>
					</select>
        		</div>
        		<div class="col-md-4"><!--第五行第2列,下拉选择-->
					<select class="form-control" ng-model="outAnimation">
						<option value="选择退场动画" ng-if="outAnimation=='选择退场动画'">选择退场动画</option>
						<option value="{{outAnimation}}" ng-bind="outAnimation" ng-repeat="outAnimation in outAnimations"></option>
					</select>
        		</div>
        		<div class="col-md-4 "><!--第五行第3列-->
        			<button class="btn btn-primary" ng-click="toggleState()">
        				变换状态
        			</button>
        		</div>
        	</div>
        </div>
        <div class="row"><!--第六行路由显示，动画切换-->
        	<div class="col-md-6 col-md-offset-3">
        		<div ui-view class="animated" ng-class="getClass()"></div>
        	</div>
        </div>
	</div>
</body>
</html>